<template>
  <div class="box">
    <el-drawer
      :visible.sync="ishTrav"
      title="新增差旅费报销"
      :append-to-body="true"
      direction="rtl"
      size="900px"
      :with-header="false"
      :before-close="handleClose"
      @close="close"
    >
      <div style="padding-bottom: 50px;">
        <el-form ref="form" label-position="right" :inline="false" :model="form">
          <el-card>
            <p class="title">基本信息</p>
            <!-- <div slot="header" class="clearfix">
              <span>基本信息</span>
            </div>-->
            <el-row>
              <el-col :span="8">
                <el-form-item label="部门" label-width="100px">
                  <el-input v-model="form.input1" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="人员" label-width="70px">
                  <el-input v-model="form.input2" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否本人报销" label-width="135px" prop="resource">
                  <el-radio-group v-model="form.radio" @change="changeradio">
                    <el-radio label="是"></el-radio>
                    <el-radio label="否"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="报销人手机号" label-width="100px">
                  <el-input v-model="form.input3" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="报销部门" label-width="70px">
                  <el-input v-model="form.input4" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="报销单位" label-width="110px">
                  <el-input v-model="form.input5" size="small"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="汇款账户名" label-width="100px">
                  <el-input v-model="form.input6" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="开户行" label-width="70px">
                  <el-input v-model="form.input7" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="汇款账户" label-width="110px">
                  <el-input v-model="form.input8" size="small"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="备注" label-width="100px">
                  <el-input v-model="form.desc" size="small" type="textarea"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>

          <!-- 报销信息区域 -->
          <el-card>
            <div class="flex_between">
              <!-- space-between -->
              <span class="title">交通费</span>
              <el-link type="primary" :underline="false" @click="AddJTF(tableData)">新增</el-link>
            </div>
            <el-table :data="tableData" style="width: 100%" border>
              <el-table-column prop="id" fixed label="序号" align="center" width="50"></el-table-column>
              <el-table-column label="出发日期" width="120">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.cfdate" size="small"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="出发地点" width="140">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.cfdidian" size="small"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="交通方式" width="100">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.jtfs" size="small" placeholder="请选择">
                    <el-option
                      v-for="item in Tboptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="座位等级" width="100">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.zwdj" size="small"></el-input>
                </template>
              </el-table-column>

              <el-table-column label="到达日期" width="120">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.ddrq" size="small"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="到达地点" width="135">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.dddd" size="small"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="交通费" align="right">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.jtf" size="small"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right" align="center">
                <template slot-scope="scope">
                  <!-- <el-input v-model="scope.row.jtf" size="small"></el-input> -->
                  <el-button
                    size="small"
                    type="danger"
                    @click="delJTF(tableData,scope.row,scope$index)"
                  >删除</el-button>
                  <!-- <el-link :underline="false" type="danger" @click="delJTF(tableData,scope.row,scope$index)">删除</el-link> -->
                </template>
              </el-table-column>
            </el-table>
            <el-divider content-position="left"></el-divider>
            <!-- 出差住宿费 -->
            <!-- <p class="title">出差住宿费</p> -->
            <div class="flex_between">
              <!-- space-between -->
              <span class="title">出差住宿费</span>
              <el-link
                v-if="isZhuSu"
                type="primary"
                :underline="false"
                @click="AddZSF(tableData2)"
              >新增</el-link>
            </div>
            <el-radio-group v-model="isZhuSu" class="display">
              <el-radio :label="1">报销住宿</el-radio>
              <el-radio :label="0">不报销住宿</el-radio>
            </el-radio-group>

            <el-table
              v-show="isZhuSu === 1"
              class="table2"
              :data="tableData2"
              style="width: 100%"
              border
            >
              <el-table-column fixed label="序号" type="index" align="center" width="50"></el-table-column>
              <el-table-column label="住宿城市" width="160">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.zscs" size="small"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="住宿方式" width="130">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.zsfs" size="small" placeholder="请选择">
                    <el-option
                      v-for="item in Tboptions2"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="入住日期" width="120">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.rzrq" size="small"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="离店日期" width="120">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.ldrq" size="small"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="天数" width="80">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.ts" size="small"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="住宿费" align="right" width="100">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.zsf" size="small"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right" align="center">
                <template slot-scope="scope">
                  <!-- <el-input v-model="scope.row.jtf" size="small"></el-input> -->
                  <el-button
                    size="small"
                    type="danger"
                    @click="delZSF(tableData2,scope.row,scope$index)"
                  >删除</el-button>
                  <!-- <el-link :underline="false" type="danger" @click="delJTF(tableData,scope.row,scope$index)">删除</el-link> -->
                </template>
              </el-table-column>
            </el-table>

            <!-- <el-form v-model="zhuSuForm"> -->
            <el-row class="top">
              <el-col :span="8">
                <el-form-item label-width="120px" label="出差天数">
                  <el-input v-model="form.date" size="small" type="Number" placeholder="出差天数"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label-width="120px" label="补助标准">
                  <!-- <el-select v-model="form.money" value-key="id">
                    <el-option v-for="item in moneyList" :key="item.id" :label="item.value" :value="item"></el-option>
                  </el-select>-->
                  <el-input v-model="form.money" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label-width="120px" size="small" label="总金额">
                  <span>{{ sumMone }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- </el-form> -->
          </el-card>
          <!-- 出差补助 -->
          <el-card>
            <p class="title">出差补助</p>
            <el-row>
              <el-col :span="8">
                <el-form-item label="出差天数" label-width="120px">
                  <el-input v-model="form.input9" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="补助标准" label-width="120px">
                  <el-input v-model="form.input10" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="补助金额" label-width="120px">
                  <!-- <el-input v-model="form.input11" size="small" disabled></el-input> -->
                  <span v-text="form.input11"></span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <!-- 发票信息区域 -->
          <el-card>
            <!-- <p class="title">发票信息</p> -->
            <div slot="header" class="space-between">
              <span class="title">发票信息</span>
              <el-button size="small" class="btnfp" type="primary" @click="addpopup = true">选择发票</el-button>
            </div>
            <el-table :data="MessageTable" style="width: 100%" border highlight-current-row>
              <el-table-column label="序号" type="index" fixed width="60" align="center"></el-table-column>
              <el-table-column prop="genre" label="发票类型" width="150"></el-table-column>
              <el-table-column label="发票号码" width="180">
                <template slot-scope="scope">{{ scope.row.num }}</template>
              </el-table-column>
              <el-table-column prop="purpose" label="发票内容" width="150"></el-table-column>
              <el-table-column prop="price" label="发票金额" width="100" align="right"></el-table-column>
              <el-table-column label="操作" fixed="right" align="center">
                <template slot-scope="scope">
                  <!-- 操作按钮 -->
                  <el-button
                    type="warning"
                    circle
                    plain
                    icon="el-icon-star-off"
                    size="small"
                    @click="popimg = true"
                  ></el-button>
                  <!-- 删除按钮 -->
                  <el-button
                    type="warning"
                    circle
                    plain
                    icon="el-icon-delete"
                    size="small"
                    @click="HanledDeleted(scope.$index)"
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
            <p class="fotterlook">
              <span class="wqsv">
                发票金额合计：
                <span>246.94</span>
              </span>
            </p>
          </el-card>
          <el-row class="footer-de">
            <el-col :span="8">
              <el-form-item label="本次报销总金额" label-width="160px">
                <!-- <el-input v-model="form.input12" disabled></el-input> -->
                <span v-text="form.input12"></span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="借款金额" label-width="80px">
                <!-- <el-input v-model="form.input13" disabled></el-input> -->
                <span v-text="form.input13"></span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="冲抵借款" label-width="80px">
                <el-input v-model="form.input14" size="small"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="Information">
            <el-button size="small" type="primary" @click="outEvection">保存</el-button>
            <el-button size="small" type="success" @click="outEvection">提交</el-button>
            <el-button size="small" type="danger" @click="handleClose">关闭</el-button>
          </div>
        </el-form>
      </div>
    </el-drawer>

    <!-- 弹出图片 -->
    <el-dialog
      :visible.sync="popimg"
      :append-to-body="true"
      width="45%"
      :class="inctive ? '' : 'el-dialog__body,el-dialog__header'"
    >
      <el-carousel height="400px">
        <el-carousel-item v-for="item in srcList" :key="item.id">
          <el-image style="width: 100%; height: 100%" :src="item.imgUrl"></el-image>
        </el-carousel-item>
      </el-carousel>
      <p class="btn-img" @click="popimg = false">
        <span>X</span>
      </p>
    </el-dialog>
    <!-- 选择发票弹出框 -->
    <el-dialog :visible.sync="addpopup" :append-to-body="true" width="45%">
      <div class="fapiaoxuz">选择发票</div>
      <el-table
        :data="MessageTable"
        style="width: 94.5%;margin:0 auto;"
        border
        size="small"
        highlight-current-row
      >
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column label="序号" fixed width="50" align="center">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column prop="genre" label="发票类型" width="130"></el-table-column>
        <el-table-column label="发票号码" width="140">
          <template slot-scope="scope">{{ scope.row.num }}</template>
        </el-table-column>
        <el-table-column prop="purpose" label="发票内容" width="150"></el-table-column>
        <el-table-column prop="price" label="发票金额" align="right"></el-table-column>
      </el-table>
      <p class="bynan">
        <el-button size="small" class="qwdsa" type="success" @click="addpopup = false">提交</el-button>
        <el-button size="small" class="asdza" type="danger" @click="addpopup = false">关闭</el-button>
      </p>
    </el-dialog>
    <component :is="configName"></component>
  </div>
</template>

<script>
// import imgbx from '@/assets/fapiao.jpg'
import Vue from 'vue'
export default {
  data() {
    return {
      configName: '',
      caiFeiMXPath: {
        configName: 'canFeiMX',
        configFilePath: 'rfcwgl/chaiLvFBX/append/canFeiMXAppend/index.vue'
      },
      WindowHeight: 0,
      isZhuSu: 1, // 是否报销住宿
      zhuSuForm: {
        time: 1,
        money: ''
      },
      moneyList: [],
      sumMone: 0,
      direction: 'rtl',
      ishTrav: true,
      labelPosition: 'right',
      inctive: false,
      popimg: false,
      addpopup: false, // 选择发票弹出框
      srcList: [
        { imgUrl: require('@/assets/img/fa(1).jpg'), id: 1 },
        { imgUrl: require('@/assets/img/fa(2).jpg'), id: 2 },
        { imgUrl: require('@/assets/img/fa(3).jpg'), id: 3 }
      ],
      form: {
        input1: '技术部',
        input2: '张三',
        input3: '15537683878',
        radio: '是',
        input4: '技术部',
        input5: '华电',
        input6: '张三',
        input7: '中国农业银行',
        input8: '6217002430085478655',
        desc: '出差补助',
        input9: '2天',
        input10: '120',
        input11: '240',
        input12: '3232',
        input13: '1213',
        input14: '',
        date: '',
        money: ''
      },
      // 发票信息
      MessageTable: [
        {
          id: 1,
          num: '00000000',
          genre: '增值税发票',
          price: '123.82',
          purpose: '出差'
        },
        {
          id: 1,
          num: '00000021',
          genre: '其它发票',
          price: '123.12',
          purpose: '交通'
        }
      ],
      tableData: [
        {
          id: 1,
          cfdate: '2016-05-02',
          cfdidian: '浙江省-杭州市',
          jtfs: '飞机',
          zwdj: '经济舱',
          ddrq: '2016-05-03',
          dddd: '四川省-凉山',
          jtf: 1233
        },
        {
          id: 2,
          cfdate: '2016-05-05',
          cfdidian: '浙江省-宁波市',
          jtfs: '高铁',
          zwdj: '二等座',
          ddrq: '2016-05-06',
          dddd: '河南省-信阳市',
          jtf: 950
        },
        {
          id: 3,
          cfdate: '2016-05-07',
          cfdidian: '河南省-郑州市',
          jtfs: '火车',
          zwdj: '卧铺',
          ddrq: '2016-05-12',
          dddd: '西藏-拉萨',
          jtf: 500
        }
      ],

      tableData2: [
        {
          id: 1,
          zscs: '浙江省-杭州市',
          zsfs: '酒店',
          rzrq: '2020-03-12',
          ldrq: '2020-03-13',
          ts: '1天',
          zsf: 213
        },
        {
          id: 2,
          zscs: '河南省-郑州',
          zsfs: '酒店',
          rzrq: '2020-03-15',
          ldrq: '2020-03-17',
          ts: '2天',
          zsf: 433
        },
        {
          id: 3,
          zscs: '山西省-太原',
          zsfs: '酒店',
          rzrq: '2020-03-23',
          ldrq: '2020-03-25',
          ts: '2天',
          zsf: 213
        }
      ],

      Tboptions: [
        {
          value: '飞机',
          label: '飞机'
        },
        {
          value: '火车',
          label: '火车'
        },

        {
          value: '汽车',
          label: '汽车'
        }
      ],
      Tboptions2: [
        {
          value: '青年旅社',
          label: '青年旅社'
        },
        {
          value: '一星级酒店',
          label: '一星级酒店'
        },
        {
          value: '二星级酒店',
          label: '二星级酒店'
        },
        {
          value: '三星级酒店',
          label: '三星级酒店'
        }
      ]
    }
  },
  computed: {
    windowHeight() {
      return this.$store.state.windowH.height
    }
  },
  watch: {
    windowHeight: function(old, newd) {
      console.log(old)
      this.WindowHeight = old
    },
    zhuSuForm: {
      handler(newName, oldName) {
        console.log(newName)
        const time = this.zhuSuForm.time ? Number(this.zhuSuForm.time) : 0
        const money = Number(this.zhuSuForm.money.value)
        // console.log(money)
        // console.log(date)
        this.sumMone = time * money
      },
      // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
      // immediate: true,
      deep: true
    }
  },
  mounted() {
    this.WindowHeight = this.$store.state.windowH.height
  },
  created() {
    // this.getMoney()
  },
  methods: {
    openWndow(e) {
      this.configName = Vue.component(e.configName, resolve => {
        require([`@/views/${e.configFilePath}`], resolve)
      })
    },
    // 添加交通费
    AddJTF(data) {
      const OBJ = {
        cfdate: '',
        cfdidian: '',
        jtfs: '',
        zwdj: '',
        ddrq: '',
        dddd: '',
        jtf: ''
      }
      data.push(OBJ)
    },
    // 删除交通费
    delJTF(data, row, index) {
      // data.splice(index, 1)
      this.$confirm('你确定要离开吗？')
        .then(_ => {
          data.splice(index, 1)
        })
        .catch(_ => {})
    },
    // 添加住宿费
    AddZSF(data) {
      const OBJ = {
        id: '',
        zscs: '',
        zsfs: '',
        rzrq: '',
        ldrq: '',
        ts: '',
        zsf: ''
      }
      data.push(OBJ)
    },
    // 删除住宿费
    delZSF(data, row, index) {
      // data.splice(index, 1)
      this.$confirm('你确定要离开吗？')
        .then(_ => {
          data.splice(index, 1)
        })
        .catch(_ => {})
    },
    handleClose(done) {
      // if (this.loading) {
      //   return
      // }
      this.$confirm('你确定要离开吗？')
        .then(_ => {
          this.ishTrav = false
        })
        .catch(_ => {})
    },
    /**
     * 获取住宿补助金额标准
     */
    getMoney() {
      this.$http.get('/api/getMoneys').then(res => {
        // console.log(res.data)
        this.moneyList = res.data
        console.log(this.moneyList)
        this.zhuSuForm.money = this.moneyList[0]
      })
    },
    // qwd(row){
    //   console.log(row)
    // },
    // 判断是否为代为报销

    /**
     * 打开侧拉列表
     */
    openAdd() {
      this.ishTrav = true
    },
    outEvection() {
      // this.ishTrav = false
      // console.log      // this.openWndow(this.caiFeiMXPath)
    },
    close() {
      // this.ishTrav = false
      // this.$router.replace({ name: 'chaiLvFBX' })
    },
    changeradio(radio) {
      console.log(radio)
      if (radio === '否') {
        this.form.input6 = ''
        this.form.input7 = ''
        this.form.input8 = ''
      }
      if (radio === '是') {
        this.form.input6 = '张三'
        this.form.input7 = '中国农业银行'
        this.form.input8 = '2434234234234545'
      }
    },
    HanledDeleted(index) {
      this.MessageTable.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  height: 100%;
}
::v-deep .el-drawer__body {
  height: 100%;
  overflow: auto;
}
::v-deep .el-drawer__header {
  font-size: 24px;
  color: cornflowerblue;
}

.title {
  font-weight: 500;
  font-size: 20px;
  height: 30px;
  margin: 5px 0px;
}

.top {
  margin-top: 15px;
}
.footer-de {
  margin-top: 15px;
  padding: 0px 15px;
}
::v-deep label::after {
  content: ':';
  position: absolute;
}
::v-deep .display label::after {
  display: none;
}
</style>
